<template>
  <div class="ques-list">
    <div class="cart-list-search">
      <div class="cart-list-start">
        <el-form label-position="top" label-width="100%" :model="search">
          <el-form-item label="输入订单号搜索">
            <div class="start-text"></div>
            <el-input style="width: 25%" v-model="search.title"></el-input>
            <el-button
              class="btn"
              type="primary"
              @click="inpSearch(search.title)"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div class="table-list">
        <div class="list">
          <div class="list-table">
            <el-table :data="UpShowTableData" style="width: 100%">
              <el-table-column
                v-for="(item, index) in tableHeader"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                min-width="150"
              >
              </el-table-column>
              <el-table-column
                v-if="deleteEdit.options == 1"
                label="操作"
                fixed="right"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-button
                    v-show="deleteEdit.delete == 1"
                    size="mini"
                    type="danger"
                    @click="handleEditDelete(scope.$index, scope.row)"
                    >{{ btn1 }}
                  </el-button>
                  <el-button
                    v-show="deleteEdit.edit == 1"
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.$index, scope.row)"
                    >{{ btn2 }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[8, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="upTotal"
              >
              </el-pagination>
            </div>
          </div>

          <!-- <el-alert title="成功提示的文案" type="success"> </el-alert> -->
        </div>
      </div>
    </div>
    <!-- 弹出框表单 -->
    <div class="list-dialog">
      <el-dialog title="商品信息" :visible.sync="dialogFormVisible" width="40%">
        <el-table :data="goodsDetails" border style="width: 100%">
          <el-table-column
            v-for="(item, index) in goodsHeader"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            min-width="180"
          >
          </el-table-column>
        </el-table>
        <!-- <div class="dialog-date">
          <div class="text">提货日期(选择日期16:00前)</div>
          <el-date-picker
            v-model="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="MM月dd日"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div> -->

        <!-- <div class="btn">
          <el-button @click="orderConfirm" type="success">确认订单</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { request } from "@/network/request.js";

export default {
  data() {
    return {
      upTotal: 0, //总条数
      upPageSize: 8, //每页数据条数
      currentPage: 1, //默认显示页数
      UpShowTableData: [], //显示数据
      radio1: "待确认",
      title: "",
      qId: "",
      id: "",
      date: "", //提货日期
      search: {
        title: "",
      },
      tableHeader: [
        { prop: "order_id", label: "订单号" },
        { prop: "name", label: "姓名" },
        { prop: "phone", label: "电话" },
        { prop: "money", label: "订单金额" },
        { prop: "address", label: "取货地址" },
        { prop: "time", label: "下单时间" },
        { prop: "over_time", label: "收货时间" },
      ],
      goodsHeader: [
        { prop: "title", label: "商品名称" },
        { prop: "num", label: "数量" },
      ],
      tableData: [], //表格最原始数据
      goodsDetails: [], //详情数据
      deleteEdit: {
        options: 1,
        delete: 0,
        edit: 1,
      },
      btn1: "删除",
      btn2: "商品详情",
      editRow: {},
      dialogFormVisible: false,
    };
  },
  components: {},
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/b-cart-order", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            this.tableData = res.data.data.sort((a, b) => {
              return a.id < b.id ? 1 : -1;
            });
            this.tableData = this.tableData.map((s) => {
              s.order_data = JSON.parse(s.order_data);
              return s;
            });
            this.tableData = this.tableData.filter((s) => s.status == "2");
            console.log(this.tableData);
            this.totalNum();
            this.dataShow(this.upPageSize);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    totalNum() {
      this.upTotal = this.tableData.length;
    },
    //确定订单
    orderConfirm() {
      console.log(this.id);
      console.log(this.date);
      if (this.date.length < 2) {
        this.$message({
          type: "error",
          message: "请选择提货日期!",
        });
        return false;
      } else {
        request({
          method: "post",
          url: "/set_cart_order", //传入confing,在baseURL后面的值
          data: {
            id: this.id,
            date: this.date,
          },
        }).then(() => {
          this.requestData().then(() => {
            this.dialogFormVisible = false;
            this.$message({
              type: "success",
              message: "已确认订单!",
            });
          });
        });
      }
    },
    //显示数据条数
    dataShow(num) {
      this.UpShowTableData = this.tableData.slice(0, num);
      this.upPageSize = num;
    },
    // 每页数量，传递
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.dataShow(val);
    },
    // 每页数据，第几页
    handleCurrentChange(val) {
      console.log(`当前页 ${val} 条`);
      //设置开始
      let start = this.upPageSize * val - this.upPageSize;
      // 设置结束长度
      let end = this.upPageSize * val; //长度判断
      console.log(end);
      end = end > this.tableData.length ? this.tableData.length : end;
      this.UpShowTableData = this.tableData.slice(start, end);
    },
    //查看操作
    handleEdit(index, row) {
      console.log(row);
      this.editRow = row;
      this.dialogFormVisible = true;
      this.id = row.id;
      this.goodsDetails = row.order_data;
      // this.qName = row.q_name;
      // this.$router.push({ path: "/home/community-ques/ques-detail" });
      // console.log(111);
      // console.log(row);
    },

    inpSearch(title) {
      console.log(title);
      this.requestData().then(() => {
        if (title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.order_id.includes(title);
          });
          this.tableData = newShowData;
          this.totalNum();
          this.dataShow(this.upPageSize);
          // console.log(newShowData);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.ques-list {
  box-sizing: border-box;
  width: 100%;
}
.cart-list-search {
  box-sizing: border-box;
  // margin: 20px;
  width: 100%;
  // height: 100%;
  padding: 20px;
  .cart-list-start {
    width: 100%;
    // height: 120px;
    background-color: #ffffff;
    color: #000;
    margin-bottom: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    .btn {
      margin-left: 10px;
    }
    // @include center;
  }

  .cart-list-table {
    // height: 100%;
    background-color: #ffffff;
    padding: 0 10px;
    box-sizing: border-box;
    // overflow: scroll;
    // overflow-y: scroll;
    .pagination {
      padding-top: 10px;
      padding-bottom: 100px;
      display: flex;
      @include right;
      background-color: #ffffff;
    }
  }
}
.table-list {
  .list {
    box-sizing: border-box;
    // margin: 20px;
    width: 100%;
    // height: 100%;
    padding: 0 20px;
    .list-start {
      width: 100%;
      // height: 120px;
      background-color: #ffffff;
      color: #000;
      margin-bottom: 10px;
      padding: 10px 10px;
      box-sizing: border-box;
      .btn {
        margin-left: 10px;
      }
      // @include center;
    }
    .list-header {
      // height: 50px;
      // border: 1px solid #ccc;
      // background-color: #161212;
      // padding: 0 20px;
      // box-sizing: border-box;
    }
    .list-table {
      // height: 100%;
      background-color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
      // overflow: scroll;
      // overflow-y: scroll;
      .pagination {
        padding-top: 10px;
        padding-bottom: 100px;
        display: flex;
        @include right;
        background-color: #ffffff;
      }
    }
  }
}
.list-dialog {
  .btn {
    padding-top: 10px;
    @include center;
    .el-button {
      width: 150px;
      letter-spacing: 2px;
    }
  }
  .dialog-date {
    .text {
      padding: 10px 0;
      font-size: 15px;
      color: #e09533;
    }
  }
}
</style>
